@layout("/common/_container.html"){
<style>
    html{
        width:100%;
        overflow-x:hidden;
    }
    .toothPage{
        font-size: 14px;
        height: 100%;
        overflow: hidden;
    }
    .toothPageHeader{
        height: 3.5em;
        line-height: 3.5em;
        position: fixed;
        background: white;
        width: 100%;
        z-index: 1;
        border-bottom: 1px solid #E5E5E5;
        padding: 0 1em;
        display: flex;
    }
    .toothPageHeader > div{
        flex: 1;
        color: #00a6c9;
    }
    .toothPageHeader > div:nth-child(2){
        color: black;
        text-align: center;
        font-size: 18px;
    }

    .toothPageContent{
        height: 100%;
        position: relative;
        padding-top: 3.6em;
    }
    .toothPageTop {
        display: flex;
        border-bottom: 1px solid #F5F5F5;
    }
    .toothPageTop > div{
        flex: 1;
        text-align: center;
        padding: 0.6em 0;
        border-bottom: 2px solid transparent;
    }
    .toothPageTop > div:first-of-type > div{
        border-right: 1px solid #F5F5F5;
    }

    .toothPageFooter{
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 1;
        padding: 0.8em;
        border-top: 1px solid #F5F5F5;
        text-align: center;
    }
    .toothPageFooter > div{
        display: flex;
        padding: 0.3em 0;
    }
    .toothPageFooter > div > div{
        flex: 1;
    }
    .toothPageFooter > div:last-of-type > div{
        background: #f5f5f5;
        border-radius: 1em;
        margin-right: 0.5em;
    }

    .toothBox{
        position: relative;
        height: 75%;
    }
    .mouthBox {
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
    }

    .mouthBox > div{
        background: #f7f7f7;
        padding: 0.3em 1.5em;
        border-radius:0.2em;
    }
    .mouthBox > div:nth-child(2){
        margin: 3em 0;
    }

    .quarterBox{
        display: flex;
        flex-direction:column;
        height:100%;
    }
    .quarterBox > div{
        flex: 1;
        display: flex;
    }
    .quarterBox > div > div{
        flex: 1;
        position: relative;
    }
    .quarterBox > div > div > span{
        position: absolute;
        background: #f7f7f7;
        border-radius:50%;
        width: 2em;
        height: 2em;
        text-align: center;
        line-height: 2em;
        font-size: 12px;
    }
</style>
<div class="toothPage">
    <div class="toothPageHeader">
        <div onclick="medicalRecord()">取消</div>
        <div>口腔检查</div>
        <div style="text-align: right">完成</div>
    </div>
    <div class="toothPageContent">
        <div class="toothPageTop">
            <div>
                <div>恒牙</div>
            </div>
            <div>
                <div>乳牙</div>
            </div>
        </div>
        <div class="toothBox">
            <div class="mouthBox">
                <div>上半口</div>
                <div>全口</div>
                <div>下半口</div>
            </div>
            <div class="quarterBox">
                <div>
                    <div class="left-top">
                        <span style="top: 10%;right: 3%">1</span>
                        <span style="top: 15%;right:19%">2</span>
                        <span style="top: 23%;right:35%">3</span>
                        <span style="top: 34%;right:49%">4</span>
                        <span style="top: 45%;left: 27%">5</span>
                        <span style="top: 57%;left: 18%">6</span>
                        <span style="top: 71%;left: 12%">7</span>
                        <span style="top: 86%;left:  9%">8</span>
                    </div>
                    <div class="right-top">
                        <span style="top: 10%;left:  3%">1</span>
                        <span style="top: 15%;left: 19%">2</span>
                        <span style="top: 23%;left: 35%">3</span>
                        <span style="top: 34%;left: 49%">4</span>
                        <span style="top: 45%;right:27%">5</span>
                        <span style="top: 57%;right:18%">6</span>
                        <span style="top: 71%;right:12%">7</span>
                        <span style="top: 86%;right: 9%">8</span>
                    </div>
                </div>
                <div>
                    <div class="left-bottom">
                        <span style="bottom: 10%;right: 3%">1</span>
                        <span style="bottom: 15%;right:19%">2</span>
                        <span style="bottom: 23%;right:35%">3</span>
                        <span style="bottom: 34%;right:49%">4</span>
                        <span style="bottom: 45%;left: 27%">5</span>
                        <span style="bottom: 57%;left: 18%">6</span>
                        <span style="bottom: 71%;left: 12%">7</span>
                        <span style="bottom: 86%;left:  9%">8</span>
                    </div>
                    <div class="right-bottom">
                        <span style="bottom: 10%;left:  3%">1</span>
                        <span style="bottom: 15%;left: 19%">2</span>
                        <span style="bottom: 23%;left: 35%">3</span>
                        <span style="bottom: 34%;left: 49%">4</span>
                        <span style="bottom: 45%;right:27%">5</span>
                        <span style="bottom: 57%;right:18%">6</span>
                        <span style="bottom: 71%;right:12%">7</span>
                        <span style="bottom: 86%;right: 9%">8</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="toothPageFooter">
            <div>
                <div style="text-align: left">同位牙位</div>
                <div style="text-align: right" onclick="toothToggle()">开关</div>
            </div>
            <div class="synchronization" style="display: none">
                <div>辅助检查</div>
                <div>诊断</div>
                <div>治疗方案</div>
                <div style="margin: 0;">处置</div>
            </div>
        </div>
    </div>
</div>
<script>
    function medicalRecord() {//添加病历
        window.location.href = Feng.ctxPath + "/doctorLooked/doctor_medicalRecord";
    }
    function toothToggle() {
        $(".synchronization").toggle();
    }
</script>
@}
